<template>
	<view class="container">
		<view class="search">
			<view class="uni-input-wrapper">
				<input type="text" v-model="search.inputValue" placeholder="请输入搜索关键词" placeholder-class="placeholder" @confirm="search.btnSearch()">
				<uni-icons v-if="search.inputValue" @tap.stop="search.close()" class="icon close_icon" type="closeempty" size="20"></uni-icons>
				<image class="search_icon" :src="url+'icon-71.png'" mode=""></image>
			</view>
			<view class="btn" @tap="search.btnSearch()">搜索</view>
		</view>
		<!-- 搜索记录 -->
		<view class="record" v-if="search.showSearchHistory && search.searchHistoryArr.length > 0">
			<view class="record_title">
				<text>最近搜索</text>
				<uni-icons @tap="search.deleteSearchHistory" class="icon" type="trash" size="24" :color="'#8B8F8D'"></uni-icons>
			</view>
			<view class="list">
				<view v-for="(item, index) in search.searchHistoryArr" :key="index" @tap="search.btnSearch(item)">{{item}}</view>
			</view>
		</view>
		<!-- 有数据 搜索结果 -->
		<view class="searchResult" v-if="search.list.length>1">
			<view class="nav">
				<view class="nav_filter">
					<view :class="search.orderType==1?'active':''" @tap="search.change(1)">综合</view>
					<view :class="search.orderType==2?'active':''" @tap="search.change(2)">新品</view>
					<view :class="search.orderType==3?'active':''" @tap="search.change(3)">销量</view>
				</view>
				<view class="change">
					<view><image @tap="search.changeisLine(true)" :src="url+ (search.isLine?'icon-177.png':'icon-178.png')" mode=""></image></view>
					<view><image @tap="search.changeisLine(false)" :src="url+ (search.isLine?'icon-176.png':'icon-175.png')" mode=""></image></view>
				</view>
			</view>
			<scroll-view :scroll-y="true" :scroll-with-animation="true" class="searchResult_recommend" @scrolltolower="search.lower">
				<shopList :isLine="search.isLine" :list='search.list'></shopList>
			</scroll-view>
		</view>
		<!-- 无数据 -->
		<view class="recommend" v-if="search.list_t">
			<view class="noData">很抱歉，没有找到关于“<text>{{search.inputValue}}</text>”的结果。</view>
			<view class="recommend_title">为您推荐</view>
			<shopList :isLine="true" :list="search.recommendGoods"></shopList>
		</view>
		<view class="model" v-if="record.modelShow">
			<view class="model_content">
				<view class="content_title">提示</view>
				<view class="content_content">您确认要删除搜索历史吗？</view>
				<view class="content_btn"><view @tap="record.modelShow=false">取消</view><view @tap="record.delectRecord">确认</view></view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { reactive,ref } from 'vue';
import api from '@/api'
import {onShow,onLoad} from '@dcloudio/uni-app'
const url = ref<string>('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')

onLoad(()=>{
	record.modelShow = false;
})
onShow(()=>{
	search.searchHistoryArr = uni.getStorageSync("search_history") || [];
})

const search = reactive<any>({
	searchHistoryArr:[],//历史记录
	inputValue:'',//搜索框
	list:[],//列表数据
	isLine:false,//列表展示形式  false 两列  true  单列
	imgList:[],//图片列表
	nextPage:true,
	showSearchHistory:true,
	orderType:1,//排序  1、综合 2、新品 3、销量
	close_img:false,
	list_t: false,
	recommendGoods:[],
	changeisLine:(flay)=>{
		search.isLine = flay
	},
	btnSearch:(item?:string)=>{
		if(item){search.inputValue = item}
		if (!search.inputValue.trim()) {
			uni.showToast({
				title: '请输入搜索关键词!',
				icon: 'none'
			})
			return;
		}
		search.page = 1
		search.list_t = false;
		search.orderType = 1
		search.getList()
		if (![""].includes(search.inputValue)) {
			search.handleSetSearchHistory();
			search.showSearchHistory = false;
		}
	},
	getList: async()=>{
		const res: any = await api({
			method: 'get',
			url: `/mall/shopping/goods/search/goodsList`,
			data:{
				keyWord:search.inputValue,
				page:search.page,
				orderType:search.orderType,
				limit:20,
			}
		})
		if(res.data.goods){
			search.list = search.page==1?res.data.goods.records:search.list.concat(res.data.goods.records)
		}else{
			search.list = []
		}
		search.nextPage = search.list>=res.data.total?false:true
		search.list_t = search.list.length!=0?false:true;
		search.recommendGoods = search.list.length==0&&res.data.recommendGoods?res.data.recommendGoods.records:[]
		search.close_img = false;
		search.showSearchHistory = false;
		uni.hideLoading()
	},
	lower:()=>{//滚动到底
	    if(!search.nextPage) return
		search.page++
		uni.showLoading({
			mask: true,
			title: "加载中"
		})
		search.getList()
	},
	change: async(index:number)=>{
		search.orderType = index
		search.page = 1
		uni.showLoading({
			mask: true,
			title: "加载中"
		})
		await search.getList()
	},
	close:()=> {
		console.log(111)
		search.list = [];
		search.list_t = false;
		search.inputValue = ''
		search.close_img = false;
		search.showSearchHistory = true;
	},
	// 储存搜索记录
	handleSetSearchHistory:()=> {
		if (![""].includes(search.inputValue)) {
			search.searchHistoryArr.unshift(search.inputValue);
			let isRepeat = 0;
			let repeatIndex = 0;
			search.searchHistoryArr.forEach((item, index) => {
				if (search.inputValue == item) {
					isRepeat++;
					repeatIndex = index;
				}
			});
			if (isRepeat > 1) {
				search.searchHistoryArr.splice(repeatIndex, 1);
			}
			if (search.searchHistoryArr.length > 20) {
				search.searchHistoryArr.pop();
			}
			uni.setStorageSync("search_history", search.searchHistoryArr);
		}
	},
	// 删除搜索记录
	deleteSearchHistory:()=>{
		uni.showModal({
			title: '提示',
			content: '您确认要删除搜索历史吗？',
			success: function (res) {
				if (res.confirm) {
					uni.setStorageSync("search_history", []);
					search.searchHistoryArr = uni.getStorageSync("search_history") || [];
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	},
})

//历史记录
const record = reactive({
	list:[],//
	modelShow:false,//删除立即记录弹框
	delectRecord:()=>{
		
	}
})


</script>

<style lang="scss" scoped>
.container{
	line-height: 1;
}
.search{
	position: sticky;
	top: 0;
	left: 0;
	z-index: 111;
	width: 100%;
	height: 88rpx;
	// padding-top: var(--status-bar-height);
	@include flex(center,space-between);
	background-color: #ffffff;
	border-bottom: 1rpx solid #f4f5f6;
	.uni-input-wrapper{
		width: 636rpx;
		position: relative;
		padding-left: 32rpx;
		box-sizing: border-box;
		.icon{
			position: absolute;
		}
		.search_icon{
			top: 12rpx;
			left: 56rpx;
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			z-index: 88;
		}
		.close_icon{
			top: 16rpx;
			right: 32rpx;
			z-index: 999 !important;
		}
	}
	input{
		width: 604rpx;
		height: 72rpx;
		font-size: 30rpx;
		color: #1B2120;
		background: #F9F6F6;
		border-radius: 200rpx;
		padding-left: 96rpx;
		box-sizing: border-box;
	}
	.placeholder{
		color: #CACCCC;
	}
    .btn{
		font-weight: bold;
		font-size: 32rpx;
		color: #FF6084;
		margin-right: 32rpx;
	}
}
.recommend{
	padding: 96rpx 32rpx 32rpx;
	background-color: #F9F6F6;
	box-sizing: border-box;
	.noData{
		font-size: 32rpx;
		color: #5C5E5E;
		text-align: center;
		margin-bottom: 96rpx;
		text{
			color: #1B2120;
			font-weight: bold;
		}
	}
	.recommend_title{
		margin-bottom: 32rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #1B2120;
	}
}
.searchResult{
	.nav{
		width: 100%;
		color: #1B2120;
		font-size: 26rpx;
		padding: 24rpx 40rpx;
		font-weight: bold;
		background-color: #FFF;
		box-sizing: border-box;
		@include flex(center,space-between);
		.change{
			@include flex(center);
			view{
				width: 48rpx;
				height: 48rpx;
				@include flex(center,center);
				border: 2rpx solid #CACCCC;
				border-radius: 12rpx 0 0 12rpx;
				&:last-child{
					border-left: none;
					border-radius: 0 12rpx 12rpx 0;
				}
			}
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.nav_filter{
			font-weight: bold;
			font-size: 26rpx;
			color: #1B2120;
			width: calc(100% - 192rpx);
			@include flex(center,space-between);
			.active{
				color: #FF6084;
			}
		}
	}
	.searchResult_recommend{
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		background-color: #F9F6F6;
	}
}
.record{
	padding: 100rpx 32rpx 32rpx;
	background-color: #F9F6F6;
	box-sizing: border-box;
	.record_title{
		color: #1B2120;
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 68rpx;
		@include flex(center,space-between);
		.icon{font-weight: normal;}
	}
	.list{
		font-size: 30rpx;
		color: #5C5E5E;
		view{
			display: inline-block;
			align-items: center;
			justify-content: center;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 16rpx;
			margin:0 16px 16px 0;
		}
	}
}
.model{
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0;top: 0;
	z-index: 999;
	@include flex(center,center);
	background: rgba(0,0,0,0.4);
	.model_content{
		width: 622rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 64rpx 40rpx;
		box-sizing: border-box;
		.content_title{
			text-align: center;
			font-weight: bold;
			font-size: 40rpx;
			color: #1B2120;
		}
		.content_content{
			text-align: center;
			margin: 48rpx 0;
			font-size: 30rpx;
			color: #1B2120;
		}
		.content_btn{
			@include flex(center,space-between);
			view{
				width: 264rpx;
				height: 88rpx;
				color: #FF6084;
				font-size: 28rpx;
				border-radius: 200rpx;
				box-sizing: border-box;
				border: 2rpx solid #FF6084;
				@include flex(center,center);
				&:last-child{
					color: #fff;
					background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
				}
			}
		}
	}
}
</style>
